 <template>
 <el-container>
   <el-header>
      <el-row style="width:100%">
        <el-col>
          <div style="font-size:16px;padding-left:20px;padding-top:20px;padding-bottom:10px;border-bottom:1px solid #d3d3d3">
            <el-button icon="el-icon-back" size="small" style="font-family: Microsoft YaHei" type="text" @click="backBookList">返回
            </el-button> | 新增图书
          </div>
        </el-col>
      </el-row>
   </el-header>
   <el-main>
    <el-row style="width:100%">
      <el-col>
        <el-scrollbar :style="scrollbarHeight" style="width:100%">
        <div style="margin-top:20px;padding-left:30px;padding-bottom:10px">
          <el-form :model="formData" :rules="rules" ref="formData" :inline-message="true">
            <el-form-item label="图书名称：" :label-width='itemWidth' prop="bookName" >
              <el-input v-model="formData.bookName" autocomplete="off" :style="inputWidth"></el-input>
            </el-form-item>
            <el-form-item label="选题号：" :label-width='itemWidth' prop="topicNumber" >
              <el-input v-model="formData.topicNumber" autocomplete="off" :style="inputWidth"></el-input>
            </el-form-item>
            <el-form-item label="ISBN：" :label-width='itemWidth' prop="isbn">
              <el-input v-model="formData.isbn" autocomplete="off" :style="inputWidth"></el-input>
            </el-form-item>
            <el-form-item label="资源开放类型：" :label-width='itemWidth'>
              <el-radio-group v-model="formData.sourcePubType">
                <div><el-radio :label="1">加密（读者通过扫图书贴码并激活后才可查看资源，图书增值服务由人卫智数提供）</el-radio></div><br>
                <div style="margin-top:5px;"><el-radio :label="2">开放（读者微信扫码即可查看资源，无权限要求）</el-radio></div><br>
                <div style="margin-top:5px;"><el-radio :label="3">会员（读者通过微信扫码并且是人卫助手会员才可以查看资源）</el-radio></div>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <div style="padding-left:200px;margin-bottom:20px">
          <el-button @click="resetForm()">重 置</el-button>
          <el-button type="primary" @click="add('formData')" >确 定</el-button>
        </div>
        </el-scrollbar>
        </el-col>
      </el-row>
   </el-main>
 </el-container>
</template>

<script>
export default {
  name: "bookAdd",
  data() {
    let checkTopicNumber = (rule, value, callback) => {
      if (UTIL.isEmpty(value)) {
        return callback(new Error('请输入选题号'));
      }
      let reg = /^[1-2][0-9]{9}$/;
      if(!reg.test(value)){
        return callback(new Error('由10位数字组成，必须以数字1或者2开头'));
      }
      callback();
    };
    let checkIsbn = (rule, value, callback) => {
      if (UTIL.isNotEmpty(value) && value.indexOf('-') === -1) {
        return callback(new Error('ISBN号必须包含-'));
      }
      callback();
    };
    return {
      scrollbarHeight:'695',
      itemWidth:'160px',
      formData:{},
      inputWidth:'width:400px;',
      imgList:[],
      rules: {
        bookName: [
          { required: true, message: '请输入图书名称', trigger: 'blur' }
        ],
        topicNumber: [
          { required: true, validator: checkTopicNumber, trigger: 'blur' }
        ],
        isbn: [
          {validator: checkIsbn, trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    add(){
      this.$refs['formData'].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '保存中...'
          });
          this.formData.pubStatus=0;
          let param = JSON.parse(JSON.stringify(this.formData))
          this.axios.post(CONST.SERVICE_REST_PACKAGE + "increaseBook/add", param)
            .then(() => {
              this.resetForm();
              loading.close();
              this.$message.success('3秒后自动跳到数字资源上传页');
              setTimeout((val) => {
                this.$router.push("/increaseBook/resourceUpload")
              }, 3000);
            }).catch((error) => {
            loading.close();
            console.error(error)
          })
        } else {
          return false;
        }
      });
    },
    backBookList() {
      this.$router.push({
          name: 'increase'
        }
      )
    },
    resetForm() {
      this.imgList=[]
      this.$refs['formData'].resetFields();
      this.formData = {sourcePubType:1};
    },
  },
  created() {
    this.formData = {sourcePubType:1};
    this.scrollbarHeight = 'height: ' + (CONST.WORKSPACE_HEIGHT - 110) + 'px'
  },
};
</script>
<style scoped>
.el-form-item {
    margin-bottom: 12px;
}
/deep/ .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
